<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <cpn></cpn>
  <cpn></cpn>
  <cpn ref="aaa"></cpn>
  <button @click="btnClick">按钮</button>
</div>


<template id="cpn">
  <div>我是子组件</div>
</template>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            message:'你好呀'
        },
        methods:{
            btnClick(){
                // 1.$chidren  用于拿到所有子组件中的对象
                // console.log(this.$children)
                // this.$children[0].showMessage();
                // for(let x of this.$children){
                //     console.log(x.name);
                //     x.showMessage();
                // }

                // 2.$refs =>对象类型，默认是一个空的对象  使用$refs的时候需要在上面组件中定义一个ref=“ ”
                console.log(this.$refs.aaa)

            }
        },
        components:{
            cpn:{
                template:'#cpn',
                data(){
                  return{
                      name:'我是子组件里面的name'
                  }
                },
                methods:{
                    showMessage(){
                        console.log('showmessage')
                    }
                }
            }
        }
    })
</script>
</body>
</html>